@charset "utf-8";

@import "common/reset";
@import "iconfont";
$fontsize:64px;
html{
    font-size: $fontsize;
}
@function r($px){
    @return $px/$fontsize*1rem;
}

.web{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    header{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: r(90px);
        line-height: r(90px);
        background: #b20000;
        text-align: center;
        padding: r(23px) 0;
        i{
            color: #fff;
            &:first-child{
            font-size: 23px;
            margin-left: r(23px);
            line-height: initial;
            }
            &:nth-of-type(2){
                display: block;
                width: r(42px);
                height: r(42px);
                line-height: r(42px);
                font-size: r(23px);
                border: 1px solid #fff;
                border-radius: 50%;
                text-align: center;
                margin-right: r(17px);
            }
        }
        .logo{
            width: r(264px);
            vertical-align: top;
        }
        
    }
    .content{
        position: absolute;
        top:r(90px);
        left: 0;
        width: 100%;
        background: skyblue;
        bottom: r(95px);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    footer{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: r(95px);
        background: #f5f5f5;
    }
}

@media screen and (min-width:768px){
    .web header i:first-child{
        font-size: 50px;
    }
}
